<template>
  <div class="app-container">
    <br>
    <br>
    <el-form :model="query" ref="query" label-width="80px">
      <el-row :gutter=10>
        <el-col :span=4>
          <el-form-item label="类型" prop="messageType" >
            <el-select  v-model="query.messageType" >
              <el-option
                v-for="item in messageTypeEnum"
                :key="item.messageType"
                :label="item.desc"
                :value="item.messageType"
                >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span=4>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search" >搜索</el-button>
            <el-button @click="resetForm('query')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      :row-class-name="tableRowClassName"
    > 
      <el-table-column align="center" label="序号" width="50">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="类型" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.messageTypeName }}
        </template>
      </el-table-column>
      <el-table-column label="内容" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.content }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.statusName }}
        </template>
      </el-table-column>
      <el-table-column label="时间" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.createdTime }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="操作" align="center" width="300" >
        <template slot-scope="scope">
          <el-button type="primary" v-if="scope.row.status === 0" @click="handle(scope.row)" size="small">去受理</el-button>
          <el-button type="danger" @click="deleteInfo(scope)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="->, total, prev, pager, next"
      :total="this.total"
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="clickCurPage"
      >
    </el-pagination>
  </div>
</template>

<script>
let id = 1000;
import { getTypeList, getList, add, edit, del } from '@/api/message'

export default {
  name: "Message",
  filters: {
    
  },
  data() {
    const validateAbb = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入代码'))
      } else {
        callback()
      }
    }
    const validateName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入名称'))
      } else {
        callback()
      }
    }
    return {
      listLoading: true,
      list: [],
      currentPage: 1,
      pageSize: 10,
      total: 20,
      curIndex: -1,
      query:{},
      form: {},
      formVisible: false,
      dialogTitle: '类型详情',
      formRules: {
        abb: [{ required: true, trigger: 'blur', validator: validateAbb }],
        name: [{ required: true, trigger: 'blur', validator: validateName }],
      },
      messageTypeEnum: [],
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.query.currentPage = this.currentPage
      this.query.pageSize = this.pageSize
      getList(this.query).then(res=> {
        console.log(res)
        this.list = res.data.records
        this.total = res.data.total
        this.listLoading = false
      }).catch(err=>{
        console.log(err)
      })
      getTypeList().then(typeRes=> {
        this.messageTypeEnum = typeRes.data
      })
    },
    deleteInfo(scope) {
      console.log(scope.row)
      this.$confirm('确定删除该部门?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(scope.row.id).then(res=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          var query = {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
          }
          getList(query).then(res=> {
            console.log(res)
            this.list = res.data
          }).catch(err=>{
            console.log(err)
          })
        }).catch(err=>{
          console.log(err)
        })
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    
    clickCurPage() {

    },
    tableRowClassName({row, rowIndex}) {
      if (row.status === 0) {
        return 'warning-row';
      }
      return '';
    },
    handle(row) {
      if(row.messageType === 1) {
        this.$router.push({name: "UserList"});
      } else if (row.messageType === 2) {
        this.$router.push({name: "PurchaseOrder"});
      }
    },
    search() {
      this.listLoading = true
      getList(this.query).then(res=> {
        console.log(res)
        this.list = res.data.records
        this.total = res.data.total
        this.listLoading = false
      }).catch(err=>{
        console.log(err)
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  
}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
